import React from 'react';
import {
	View,
	Navigator,
	Image,
	StyleSheet,
	StatusBar
} from 'react-native';
import { connect } from 'react-redux'

import YaguanHome from './YaguanHome'
import Mine from './Mine/Mine'

import TabNavigator from 'react-native-tab-navigator';

import { MtColor, MtNavBar } from 'martian-ui';
const MtIcon = require('martian-icon');

class TabViewController extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			selectedTab: 'home'
		};
	}

	render() {

		return (
			<View style={styles.container} >
				<TabNavigator tabBarStyle={styles.tab}>
					<TabNavigator.Item
						selected={this.state.selectedTab === 'home'}
						title="首页"
						titleStyle={styles.tabText}
						selectedTitleStyle={styles.selectedTabText}
						renderIcon={() => <Image source={require('../img/tabicon.png')} style={styles.icon}/> }
						renderSelectedIcon={() => <Image style={styles.icon} source={require('../img/tabicon.png')} />}
						onPress={() =>
							{
							StatusBar.setBarStyle('dark-content')
							this.setState({ selectedTab: 'home' })}
						}
					>
						<YaguanHome
							props={this.props}
							tip={this.state.selectedTab}
							navigator={this.props.navigator}
						/>
					</TabNavigator.Item>
					<TabNavigator.Item
						selected={this.state.selectedTab === 'me'}
						title="我的"
						titleStyle={styles.tabText}
						selectedTitleStyle={styles.selectedTabText}
						renderIcon={() => <Image source={require('../img/tabicon.png')} style={styles.icon}/> }
						renderSelectedIcon={() => <Image style={styles.icon} source={require('../img/tabicon.png')} />}
						onPress={() =>{
							StatusBar.setBarStyle('light-content')
							this.setState({ selectedTab: 'me' })
						}
						}>
						<Mine
							props={this.props}
							navigator={this.props.navigator}
						/>
					</TabNavigator.Item>

				</TabNavigator>
			</View>

		);
	}

}

export default TabViewController;
const styles = StyleSheet.create({
	container: {
		flex: 1
	},
	tab: {
		height: 70,
		backgroundColor: '#FFFFFF',
		alignItems: 'center'
	},
	tabText: {
		marginTop: 3,
		color: '#333333',
		fontSize: 10
	},
	selectedTabText: {
		marginTop: 3,
		color: '#00A5AD',
		fontSize: 10
	},
	icon: {
		width: 30,
		height: 31,
		resizeMode: 'stretch',
		marginTop: 10
	}})
